import {isRouteErrorResponse, useRouteError} from "react-router-dom";
import styled from "styled-components";


const Wrap = styled.div`
  width: 100vw;
  display: flex;
  justify-content: center;

  #error-page {
    text-align: center;
  }
`

const ErrorPage = () => {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <Wrap>
        <div id="error-page">
          <div>https://juejin.cn/post/7363927383840210985</div>
          <h1>Oops!</h1>
          <p>Sorry, an unexpected error has occurred.</p>
          <p>
            <i>{error.statusText}</i>
          </p>
          {error.data?.message && (
            <p>
              <i>{error.data.message}</i>
            </p>
          )}
        </div>
      </Wrap>
    )
  } else {
    return <></>
  }

}

export default ErrorPage
